<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="IT技术课程网站">
		<meta name="keywords" content="IT技术课程网站">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<title>IT技术视频课程</title>
		<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
		<base th:href="@{/}">
		<!--[if lt IE 9]>
		  <script src="js/html5shiv.min.js"></script>
		  <script src="js/respond.min.js"></script>
		<![endif]-->
		<script>
			window.onload = function(){
				//将连接传输的数据分割出来
				if(location.search){
					var data  = location.search.split("?res=")[1];
					var	res   =	data.split("&tabid=")[0];
					var	tabid =	data.split("&tabid=")[1];
					//激活菜单样式
					$(".qianduan").removeClass("meun-item-active");
					$("."+tabid).addClass("meun-item-active");
					//通过URI解码将链接中的数据解码为正常的DOM内容，这个方法可以将各种特殊字符都正常编码解码
					$("#video_searchres").html(decodeURIComponent(res));
				}
			}
			//异步加载查询结果
			function searchVideo(vtype_id) {
				var url = 'searchVideo?vtype_id='+vtype_id;
				$.get(url, function (data) {
					$("#video_searchres").html(data);
				})
			}
		</script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap3.min.css">
		<link rel="stylesheet" type="text/css" href="css/flat-ui.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<link rel="stylesheet" type="text/css" href="css/videoMain.css" />
	</head>

	<body>
		<nav class="navbar navbar-inverse navbar-lg navbar-expand-lg" role="navigation">
			<a class="navbar-brand" href="indexMain.html">
				<img src="images/ITx32.png" style="width: auto;height: 25px;">
			</a>
			<a class="navbar-brand" style="padding-left: 0;" href="indexMain.html">IT技术课程网站</a>
			<div class="collapse navbar-collapse" id="navbar-collapse-01">
				<ul class="nav navbar-nav mr-auto">
					<li><a href="indexMain.html">首页</a></li>
					<li class="active"><a href="videoMain.html">视频课程</a></li>
					<li><a href="blogMain.html">博客文章</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right mr-auto">
					<li><a th:text="${session.Account.username}" href="userInfo.html" id="username-menu">用户名</a></li>
				</ul>
				<form class="navbar-form form-inline my-2 my-lg-0" action="searchInputVideo" role="search" style="margin: 0px;">
					<div class="form-group" style="margin-left: 20px;">
						<div class="input-group">
							<input class="form-control" id="navbarInput-01" name="searchText" style="width: 250px;" type="search" placeholder="输入搜索课程" required>
							<span class="input-group-btn">
								<button type="submit" class="btn"><span class="fui-search"></span></button>
							</span>
						</div>
					</div>
				</form>
			</div><!-- /.navbar-collapse -->
		</nav><!-- /navbar -->

		<!-- container -->
		<div class="container">

			<!-- 视频分类开始 -->
			<div class="jumbotron navbar-inverse" style="color: #fff;">
				<div class="row">
					<div class="leftMenu col-lg-3 col-md-3 col-sm-3">
						<div class="meun-item meun-item-active qianduan" href="#qianduan" aria-controls="qianduan" role="tab" data-toggle="tab">前端开发</div>
						<div class="meun-item houduan" href="#houduan" aria-controls="houduan" role="tab" data-toggle="tab">后端开发</div>
						<div class="meun-item shujuku" href="#shujuku" aria-controls="shujuku" role="tab" data-toggle="tab">数据库技术</div>
						<div class="meun-item wangluo" href="#wangluo" aria-controls="wangluo" role="tab" data-toggle="tab">网络运维</div>
					</div>
					<div class="rightMenu col-lg-9 col-md-9 col-sm-9">
						<!-- Tab panes -->
						<ul class="tab-content">
							<li class="tab-pane active" id="qianduan" role="tabpanel">
								<div class="row">
									<div th:each="qianduanList:${qianduanList}" th:onclick="'searchVideo('+${qianduanList.id}+')'" class="type-item col-md-3 col-sm-4">
										<a th:text="${qianduanList.vtypename}" >HTML5</a>
									</div>
								</div>
							</li>
							<li class="tab-pane" id="houduan" role="tabpanel">
								<div class="row">
									<div th:each="houduanList:${houduanList}" th:onclick="'searchVideo('+${houduanList.id}+')'" class="type-item col-md-3 col-sm-4">
										<a th:text="${houduanList.vtypename}">HTML5</a>
									</div>
								</div>
							</li>
							<li class="tab-pane" id="shujuku" role="tabpanel">
								<div class="row">
									<div th:each="shujukuList:${shujukuList}" th:onclick="'searchVideo('+${shujukuList.id}+')'" class="type-item col-md-3 col-sm-4">
										<a th:text="${shujukuList.vtypename}">HTML5</a>
									</div>
								</div>
							</li>
							<li class="tab-pane" id="wangluo" role="tabpanel">
								<div class="row">
									<div th:each="wangluoList:${wangluoList}" th:onclick="'searchVideo('+${wangluoList.id}+')'" class="type-item col-md-3 col-sm-4">
										<a th:text="${wangluoList.vtypename}">HTML5</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 视频分类结束 -->
			<!-- 最新视频开始 -->
			<div th:fragment="video_searchres" id="video_searchres">
				<h4 th:text="${videoType.vtypename}">最新课程</h4>
				<hr />
				<div class="row">
					<div class="col-sm-8 col-md-6" th:if="${#lists.isEmpty(videoList)}">
						<h4>没有找到相关内容</h4>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6 col-md-3" th:each="videoList:${videoList}">
						<div class="thumbnail">
							<a th:href="@{videoDetail?v_id={id}(id=${videoList.id})}">
								<img th:src="${videoList.vcoverurl}" alt="视频封面图片">
								<div class="caption">
									<h6><a th:text="${videoList.vtitle}">视频标题</a></h6>
									<span>￥</span><span th:text="${videoList.vprice}">视频价格</span>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
			<!-- 最新视频结束 -->
			

		</div> <!-- /container -->
		<!-- 底部信息 -->
		<footer class="footer">
			<div class="footer-title">
				About the website
			</div>
			<hr >
			<div class="footer-content">
				<ul>
					<li><span>@Author: </span><span><a href="#fakelink">renexton@163.com</a></span></li>
					<li><span>Copyright &copy;2020 </span><span><a href="#fakelink">WSS-Studio</a></span></li>
				</ul>
			</div>
		</footer>


		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/flat-ui.js"></script>
		<script src="js/application.js"></script>
		<script>
			$(function() {
				$(".meun-item").click(function() {
					$(".meun-item").removeClass("meun-item-active");
					$(this).addClass("meun-item-active");
				});

			})
		</script>

	</body>

</html>
